<template>
  <el-dialog
    class="add-contractors-comp"
    title="设置项目参建方"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <div class="form-container">
      <div class="btns">
        <el-button type="primary" @click="handleAdd">
          新增
        </el-button>
      </div>
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        :height="$setRem(500)"
        row-key="id">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="projectAttr" label="项目属性">
<!--          <template slot-scope="scope">-->
<!--            <el-input-->
<!--              v-if="scope.row.hasEdit"-->
<!--              placeholder="请输入项目属性"-->
<!--              :value="scope.row.projectAttr"-->
<!--              @blur="(val) => handleBlur(val, scope.row, scope['$index'])"-->
<!--              @input="(val) => handleInput(val, scope.row, scope['$index'])">-->
<!--            </el-input>-->
<!--            <span v-else>{{ scope.row.projectAttr }}</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column prop="action" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row, scope['$index'])">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.row, scope['$index'])">
              删除
            </el-button>
          </template>
        </el-table-column>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-dialog
        title="设置项目参建方"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :visible="setVisible"
        append-to-body
        :width="$setRem(450)"
        :before-close="cancel">
        <el-form
          :model="ruleForm"
          :rules="rules"
          size="medium"
          ref="ruleForm"
          :label-width="$setRem(120)"
          class="rule-form"
        >
          <el-row>
            <el-form-item label="项目属性" prop="projectAttr" required>
              <el-input
                type="text"
                clearable
                placeholder="请输入项目属性"
                v-model="ruleForm.projectAttr">
              </el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="排序" prop="sort">
              <el-input
                type="text"
                clearable
                placeholder="排序"
                v-model="ruleForm.sort">
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="cancel">取 消</el-button>
          <el-button
            size="medium"
            type="primary"
            :loading="loading"
            @click="hanldeSave">
            保 存
          </el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    // 弹框是否展示
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      setVisible: false,
      type: 'add',
      ruleForm: {
        id: '',
        projectAttr: '',
        sort: ''
      },
      // form 表单校验规则
      rules: {
        projectAttr: [
          { required: true, message: '请输入项目属性' },
        ],
      },
    };
  },
  watch: {
    // 监听弹框显示/隐藏
    visible(value) {
      if (value) {
        this.getContractors();
      }
    },
  },
  methods: {
    async getContractors() {
      const { success, data: {
        data
      }} = await this.$Model.getContractors({
        projectId: this.projectId,
        pageFlag: false
      });
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(v => ({
          ...v,
          hasEdit: false
        }));
      }
    },
    // 编辑项目属性
    handleInput(val, row, index) {
      const item = {
        ...row,
        projectAttr: val.replace(/(^\s+)|(\s+$)/, ''),
      };
      this.tableData.splice(index, 1, item);
    },
    handleBlur(val, row, index) {
      if (!row.projectAttr) return;
      const item = {
        ...row,
        hasEdit: false,
      };
      this.tableData.splice(index, 1, item);
    },
    // 新增
    handleAdd() {
      this.type = 'add';
      this.setVisible = true;
      // this.tableData.unshift({
      //   hasEdit: true,
      //   projectAttr: ''
      // });
    },
    // 编辑
    handleEdit({ id, projectAttr, sort }) {
      this.type = 'edit';
      this.ruleForm = {
        id,
        projectAttr,
        sort
      };
      this.setVisible = true;
      // const item = {
      //   ...row,
      //   hasEdit: true
      // };
      // this.tableData.splice(index, 1, item);
    },
    // 删除
    handleDel(row, index) {
      this.$confirm('此操作将删除该选项, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        this.tableLoading = true;
        const { success } = await this.$Model.delContractors({
          ids: row.id,
        });
        this.tableLoading = false;
        if (success) {
          this.getContractors();
          this.$message.success('删除成功');
        }
      });
      // this.tableData.splice(index, 1);
    },
    cancel() {
      this.ruleForm = {
        id: '',
        projectAttr: '',
        sort: ''
      };
      this.setVisible = false;
    },
    // 保存
    hanldeSave() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const params = {
            projectId: this.projectId,
            ...this.ruleForm
          };
          if (this.type === 'add') delete params.id;
          const { success } = this.type === 'add'
            ? await this.$Model.addContractors(params)
            : await this.$Model.updateContractors(params);
          if (success) {
            this.getContractors();
            this.$message.success('保存成功');
            this.cancel();
          }
        }
      });
    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "../../assets/styles/dialog";
  .add-contractors-comp {
    .form-container {
      .btns {
        width: 100%;
        margin-bottom: 10px;
        text-align: right;
      }
    }
  }
</style>
